<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15 - (input)按钮点击(disabled 属性)</title>
</head>
<body>
    <input type="button" value="按钮" class="btn1">
    <input type="submit" class="btn2">

    <input type="checkbox" class="ck">

    <script>

        // A. disabled 属性     禁止当前按钮被点击, 该属性给按钮设置的


        // 通过 js 方式操作按钮是否可以点击
        // 语法:
        // ☛   标签对象.disabled = false;      设置按钮能点击
        // ☛   标签对象.disabled = true;       设置按钮不能点击

        // 代码演示:
        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        // 设置按钮可以点击
        btn1.disabled = false;
        // 设置按钮不能点击
        btn2.disabled = true;





        // B. checked 属性     全选按钮 ---- 复选框 --- 有没有被选中


        // 1. 获取标签的 checked 属性值
        // 语法:
        // ☛   标签对象.checked;

        // 代码演示:
        let ck = document.querySelector('.ck');
        console.log(ck.checked);                
        // 如果复选框没有 checked 属性, 复选框没有被选中, 那么获取到的 checked 值就是 false
        // 如果复选框设置了 checked 属性, 复选框被选中了, 那么获取到的 checked 值就是 true
        
        // 2. 设置标签的 checked 属性值
        // 语法: 
        // ☛   标签对象.checked = true;        代表将复选框设置为选中效果
        // ☛   标签对象.checked = false;       代表将复选框取消了选中效果

        // 代码演示:
        ck.checked = false;

        
    </script>
</body>
</html>